<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- ¶Layout 布局通过基础的 24 分栏，迅速简便地创建布局 -->
      <!-- 参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。 -->
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 通过 flex 布局来对分栏进行灵活的对齐。 -->
        <!-- 将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。 -->

        <!-- 表单头部开始 -->
        <tree-tools :tree-node="company" :is-root="true" @addDept="addDept" />
        <!-- 表单头部结束 -->
        <!--放置一个属性   这里的props和我们之前学习的父传子 的props没关系-->
        <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
          <!-- 表单部分主体开始 -->
          <!-- @delDepts="getDepartments"重新请求最新数据 -->
          <Tree-tools slot-scope="{ data }" :tree-node="data" @delDepts="getDepartments" @addDept="addDept" @editDepts="editDepts" />
          <!-- 表单部分主体结束 -->
        </el-tree>
      </el-card>

    </div>
    <!-- 放置新增弹层组件  -->
    <!-- :tree-node="node"要添加的总部门的id(总部门id=子部门pid) -->
    <add-dept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :tree-node="node"
      @addDepts="getDepartments"
    />
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { getDepartments } from '@/api/departments'
// 工具方法处理数据为树状
import { transListToTreeData } from '@/utils/index'

export default {
  components: {
    TreeTools: TreeTools,
    AddDept: AddDept
  },

  data() {
    return {
      // 表单头部数据
      // company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },

      // departs: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
      //   { name: '行政部', manager: '刘备' },
      //   { name: '人事部', manager: '孙权' }],
      company: {},
      departs: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      // 显示窗体
      showDialog: false,
      node: null

    }
  },

  created() {
    // 调用自身的方法
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      // 需要将其转化成树形结构
      // this.departs = result.depts
      // 第一次找总的部门 总部门没有pid;总部门的id等于子部门的pid
      this.departs = transListToTreeData(result.depts, '')
      console.log(result)
      console.log(this.departs)
    },
    // 方法中弹出层,记录在哪个节点下添加子部门
    addDept(node) {
      // 显示弹层
      this.showDialog = true
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node
    },
    // 编辑部门节点
    editDepts(node) {
      // 首先打开弹层
      this.showDialog = true
      // 赋值操作的节点
      this.node = node
      // 我们需要在这个位置 调用子组件的方法
      // 父组件 调用子组件的方法
      // 直接调用子组件中的方法 传入一个id
      this.$refs.addDept.getDepartDetail(node.id)
      console.log(this.$refs.addDept)
    }

  }

}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}

</style>
